<div class="flex flex-col flex-auto w-full p-4 sm:p-4">
    <div class="flex items-center justify-between mb-4 mx-3">
        <h1 class="text-3xl font-medium tracking-tight leading-none">Code Task Details</h1>
        <button mat-flat-button color="primary">
            <mat-icon svgIcon="heroicons_outline:plus"></mat-icon>
            <span class="ml-2">New Code Task</span>
        </button>
    </div>


    <!-- CodeTask Details Card -->
    <ng-container *ngIf="codeTask$ | async as codeTask; else loadingOrError">
        <mat-card class="w-full">
            <mat-card-header>
                <mat-card-title>{{ codeTask.title }}</mat-card-title>
                <mat-card-subtitle>ID: {{ codeTask.id }} | Status: {{ codeTask.status | titlecase }}</mat-card-subtitle>
            </mat-card-header>

            <!-- Status specific messages -->
             <div *ngIf="codeTask.status === 'initializing'" class="p-4 m-4 border rounded bg-blue-50 border-blue-200 text-blue-700">
                <div class="flex items-center">
                    <mat-icon class="mr-2" svgIcon="heroicons_outline:information-circle"></mat-icon>
                    <span>Initializing Code task, cloning repository and setting up workspace...</span>
                </div>
                <mat-progress-bar mode="indeterminate" class="mt-2"></mat-progress-bar>
            </div>
             <div *ngIf="codeTask.status === 'selecting_files'" class="p-4 m-4 border rounded bg-purple-50 border-purple-200 text-purple-700">
                 <div class="flex items-center">
                    <mat-icon class="mr-2" svgIcon="heroicons_outline:document-search"></mat-icon>
                    <span>Analyzing instructions and selecting relevant files...</span>
                 </div>
                <mat-progress-bar mode="indeterminate" class="mt-2"></mat-progress-bar>
            </div>

            <mat-card-content class="mt-4">

                <mat-accordion multi>
                    <mat-expansion-panel class="mb-2">
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                {{ codeTask.title }}
                            </mat-panel-title>


                            <div class="py-2">
                                <div class="mb-3">
                                    <h4 class="font-medium text-lg mb-1">{{ codeTask.title }} | Status: {{ codeTask.status | titlecase }}</h4>
                                    <h4 class="font-medium text-lg mb-1">Instructions:</h4>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                <div>
                                    <div class="font-semibold">Instructions:</div>
                                    <p class="text-secondary whitespace-pre-wrap">{{ codeTask.instructions }}</p>
                                </div>
                                <div>
                                    <div class="font-semibold">Repository:</div>
                                    <p class="text-secondary">
                                        Source: {{ codeTask.repositorySource | titlecase }} {{ codeTask.repositoryId }}<br>
                                        Target/Working Branch: {{ codeTask.targetBranch }} / {{ codeTask.workingBranch }} <br>
                                        <!--
                                        <ng-container *ngIf="codeTask.newBranchName">
                                            New Branch: {{ codeTask.newBranchName }} <br>
                                        </ng-container>
                                        Shared Repo: {{ codeTask.useSharedRepos ? 'Yes' : 'No' }}
                                        -->
                                    </p>
                                </div>
                                <div>
                                    <div class="font-semibold">Created At:</div>
                                    <!-- Fix - codeTask.createdAt and updatedAt is a number -->
                                    <p class="text-secondary">{{ codeTask.createdAt | date:'medium' }}</p>
                                </div>
                                <div>
                                    <div class="font-semibold">Last Updated:</div>
                                    <p class="text-secondary">{{ codeTask.updatedAt | date:'medium' }}</p>
                                </div>
                                <div *ngIf="codeTask.error" class="sm:col-span-2">
                                    <div class="font-semibold text-red-600">Error:</div>
                                    <p class="text-red-500 whitespace-pre-wrap">{{ codeTask.error }}</p>
                                </div>

                                <!-- File Autocomplete Input (Only shown when NOT in file_selection_review or initializing states) -->
                                <!-- THIS ENTIRE DIV BLOCK IS REMOVED as its functionality is now in codeTask-file-list -->

                                <!-- Use the new CodeTaskDesignProposalComponent
                                <codeTask-design-proposal
                                    *ngIf="codeTask.designAnswer"
                                    [codeTask]="codeTask"
                                    (designAccepted)="handleDesignAccepted($event)"
                                    class="sm:col-span-2">
                                </codeTask-design-proposal>
                                -->
                            </div>


                            <mat-panel-description class="text-red-600 font-semibold flex items-center">
                                <mat-icon color="warn" class="mr-1 icon-size-5">error_outline</mat-icon>
                                Ended with error
                            </mat-panel-description>
                        </mat-expansion-panel-header>
                    </mat-expansion-panel>
                </mat-accordion>


                <ng-container *ngIf="codeTask.status === 'file_selection_review' || codeTask.status === 'updating_file_selection' || codeTask.status === 'design_review' || codeTask.status === 'coding' || codeTask.status === 'code_review' || codeTask.status === 'ci_failed' || codeTask.status === 'completed' || codeTask.status === 'error_file_selection' || codeTask.status === 'error_design_generation' || codeTask.status === 'error_coding' || codeTask.status === 'error'">
                    <div class="mt-6 pt-6 border-gray-200">
                        <code-task-file-selection [codeTask]="codeTask"></code-task-file-selection>
                    </div>
                </ng-container>
            </mat-card-content>
        </mat-card>
    </ng-container>

    <!-- Loading/Error Template -->
    <ng-template #loadingOrError>
        <!-- Check if there was an error fetching (e.g., using catchError in the observable pipe), otherwise show loading -->
        <!-- Basic loading indicator -->
        <div class="flex justify-center items-center h-64">
             <!-- Consider adding error handling display here if codeTask$ errors out -->
            <mat-progress-bar mode="indeterminate" class="w-64"></mat-progress-bar><br/>
            <span class="ml-4 text-secondary">Loading codeTask details...</span>
        </div>
    </ng-template>
</div>
